<template>
  <div class="head" style="text-align: right; font-size: 12px">
    <el-button @click="showCart" type="text" size="mini">我的购物车</el-button>
    <el-button @click="myOrders" type="text" size="mini">我的订单</el-button>
    <el-dropdown>
      <i class="el-icon-setting" style="margin-right: 15px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click="login" v-if="!user">登录</el-dropdown-item>
        <el-dropdown-item @click="out" v-else>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <span v-if="user">{{user.userName}}</span>
    <span v-else>请登录</span>
  </div>
</template>

<script>
export default {
  data(){
    return {
      user:{},
    }
  },
  methods: {
    myOrders() {
      const { href } = this.$router.resolve({
        name: "我的订单",
        query: {},
      });
      window.open(href, "_blank");
    },
    login(){
      const { href } = this.$router.resolve({
        name: "登录",
        query: {},
      });
      window.open(href, "_blank");
    },
    showCart() {
      const { href } = this.$router.resolve({
        name: "购物车",
        query: {},
      });
      window.open(href, "_blank");
    },
  },
  created(){
    var user = JSON.parse(localStorage.user);
    this.user = user;
  }
};
</script>

<style>
.head {
  background: #f3f3f3;
  font-size: 18px;
  padding: 10px;
}
</style>